<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>通讯录案例</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      padding-bottom: 50px;
    }

    .address-header {
      position: fixed;
      width: 100%;
      height: 46px;
      line-height: 45px;
      color: #fff;
      border-bottom: 1px solid #e4e4e4;
      text-align: center;
      background-color: #f4664f;
      z-index: 999;
    }

    .address-header i {
      position: absolute;
      right: 10px;
    }

    .address-book {
      margin: 0 15px;
      overflow: hidden;
      padding-top: 50px;
    }

    .address-book .item {
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      border-bottom: 1px solid #e9e9e9;
      position: relative;
      transition: all 0.3s linear;
    }

    /* 实现滑动效果 */
    .address-book .item.active {
      transform: translateX(-50px);
    }

    .address-book .item>.circle {
      width: 30px;
      height: 30px;
      margin-right: 15px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      background-color: #f38383;
      border-radius: 50%;
    }

    .address-book .item>.name {
      width: 80px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .address-book .item>.tel {
      margin-left: 20px;
      color: #666;
    }

    .address-book .item>.del {
      position: absolute;
      right: -50px;
      top: 0;
      height: 50px;
      width: 50px;
      color: #fff;
      text-align: center;
      text-decoration: none;
      font-size: 14px;
      background-color: #eee;
    }

    .address-book .item>.del i {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      border-radius: 50%;
      background-color: #f60;
    }

    .address-footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50px;
      border-top: 1px solid #e4e4e4;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
    }

    .address-footer input {
      appearance: none;
      border: 0;
      outline: 0;
      width: 130px;
    }

    .address-footer button {
      appearance: none;
      border: 0;
      outline: 0;
      background-color: #069;
      color: #fff;
      padding: 5px;
      border-radius: 4px;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="address-header">
    通讯录
    <i class="iconfont icon-tianjiayonghu"></i>
  </div>
  <div class="address-book">
    <!-- 添加item 核心区域-->

  </div>
  <div class="address-footer">
    <input id="name" type="text" placeholder="请输入姓名" />
    <input id="tel" type="text" placeholder="请输入手机号" />
    <button id="add">添加联系人</button>
  </div>
  <!-- 引入手势插件 -->
  <script src="https://unpkg.com/alloyfinger@0.1.16/alloy_finger.js"></script>
  <script>
    // 初始化数据
    const arr = [
      { name: "周杰伦", tel: "13411112222" },
      { name: "刘德华", tel: "13511112222" },
      { name: "张学友", tel: "13711112222" },
      { name: "岳云鹏", tel: "13911112222" },
      { name: "迪丽热巴", tel: "13911112222" }
    ]
    // 要把arr数组里面的数据渲染在页面中
    // 获取address-book
    const book = document.querySelector('.address-book')
    // 渲染函数
    const render = function (data) {
      // 页面进来就清空一次book里面的内容
      book.innerHTML = ''
      // 遍历数组
      data.forEach(function (item, index) {
        // 要清楚item是什么  ===>data里面的每一组数据
        // console.log(item)
        // 得到每一组数据后 要把数据传到address-book里面 要先创建一个新的元素节点 div
        const div = document.createElement('div')
        // 把html结构添加到div里面
        div.innerHTML = `
        <div class="item" data-id="${index}">
              <p class="circle">${item.name.substring(item.name.length - 1)}</p>
              <p class="name">${item.name}</p>
              <p class="tel">${item.tel}</p>
              <a class="del" href="javascript:;">
                <i class=" iconfont icon-shanchutianchong"></i>
              </a>
            </div>
        `
        // 追加节点 父元素最后一个子节点之后，插入节点元素
        book.append(div)
      })
      // 因为封装了滑动函数 在页面进来的时候 我们就给每一个item添加滑动效果 直接调用滑动函数
      initSwipe()
    }
    render(arr)

    // 添加滑动
    // 给每一个item都要绑定滑动
    // 遍历item 先获取
    // 封装滑动函数initSwipe
    function initSwipe() {
      const items = document.querySelectorAll('.item')
      items.forEach(function (ele, index) {
        // console.log(ele) //ele是每一个item元素
        // 添加滑动
        let af = new AlloyFinger(ele, {
          // 滑动时候触发的函数
          swipe: function (evt) {
            // direction 滑动的方向 Left  Right 注意第一个字母要大写
            // console.log("swipe" + evt.direction)
            // 如果往左滑动，则让item盒子添加 active类，就可以让盒子左侧移动了
            if (evt.direction === 'Left') {
              // console.log('左侧滑动了')
              // 排他
              const isHave = document.querySelector('.active')
              isHave && document.querySelector('.active').classList.remove('active')
              ele.classList.add('active')
            } else {
              ele.classList.remove('active')
            }
          }
        })
      })
    }
    // 点击添加 页面能显示数据
    // 获取元素 添加按钮 年龄和电话的输入框
    const add = document.querySelector('#add')
    const uname = document.querySelector('#name')
    const tel = document.querySelector('#tel')
    // console.log(add)
    // 点击事件
    add.addEventListener('click', function () {
      // 获取输入的值  去掉两边的空格
      const uvalue = uname.value.trim()
      const tvalue = tel.value.trim()
      // console.log(uvalue)
      // 判断值是否为''
      if (!uvalue || !tvalue) {
        alert('输入不能为空')
        return false
      }
      // 生成数组对象
      // const obj = {
      //   name: uvalue,
      //   tel: tvalue
      // }
      // console.log(obj) obj:{name: '11', tel: '11'}
      // 添加的数据新增到之前的数据里面
      arr.push({
        name: uvalue,
        tel: tvalue
      })
      // 这么直接调用函数会产生两组之前的数据 一组原来的 一组现在调用重新生成的  所以调用之前要清空一下表单
      uname.uvalue = ''
      tel.tvalue = ''
      render(arr)
    })
    // 此时页面能添加数据 但是添加完了之后没了滑动效果 因为我们点击添加的时候重新创建了数据 相当于把最开始的item都删掉了 所以需要给滑动封装函数initSwipe


    // 点击删除可以删除数据
    // console.log(del)
    book.addEventListener('click', function (e) {
      // console.log('del')
      // 点击I就删除
      if (e.target.tagName === 'I') {
        // console.log('1')
        const result = confirm('真的要删吗')
        result && arr.splice(e.target.dataset.id, 1)
        render(arr)
      }
    })
  </script>
</body>

</html>